<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import axios from "axios";
import data from "/src/data/index.js";

const router = useRouter();
const route = useRoute();
const spinning = ref(false);
const current = ref(1);
const pageSize = ref(100);
const total = ref(0);
const { keywords } = route.query;
const ListData = ref([]);
for (let [key, value] of Object.entries(data)) {
  ListData.value = [
    ...ListData.value,
    ...value.map((item) => ({ ...item, title: key })),
  ];
}
const value = ref("");
value.value = keywords;
const openDetails = (id, type, item) => {
  router.push(`/details/${id}?type=${type}`);
  localStorage.setItem("item", JSON.stringify(item));
};
const goToHome = () => {
  router.push("/");
};
const library = ref([]);
const init = (title) => {
  spinning.value = true;
  axios
    .get(
      `/makeapie?page=${current.value}&per_page=${pageSize.value}&title=~${title}`
    )
    .then((res) => {
      if (res.status == 200) {
        library.value = res.data.data.map((item) => ({
          ...item,
          thumbnailURL: JSON.parse(item.thumbnailURL)[0].url,
        }));
        console.log(library.value);
        total.value = res.data.total;
        spinning.value = false;
      }
    });
};
init(keywords);
const onchange = (value) => {
  current.value = value;
  init(keywords);
};
const onShowSizeChange = (currents, pageSizes) => {
  current.value = currents;
  pageSize.value = pageSizes;
  init(keywords);
};
const search = (value)=>{
  // init(value)
  router.push({
    path: "/search",
    query: {
      keywords: value,
    },
  });
  init(value)
}
</script>

<template>
  <a-spin tip="Loading..." :spinning="spinning">
    <div>
      <div class="header">
        <div class="logo" @click="goToHome">ECHARTS PLUS</div>
        <div class="search">
          <a-input-search
            v-model:value="value"
            placeholder="input search text"
            enter-button="搜索"
            size="large"
            @search="search(value)"
          />
        </div>
      </div>
      <div class="content">
        <div class="list">
          <div class="item" v-for="(i, count) in library" :key="count">
            <div
              @click="openDetails(i.cid, i.title, i)"
              style="min-height: 187.5px"
            >
              <img v-img="i.thumbnailURL" alt="" />
            </div>
            <!-- <a-skeleton-image /> -->
            <h3 class="title">{{ i.title }}</h3>
            <span class="tip">{{ i?.description || i.lastUpdateTime }}</span>
          </div>
        </div>

        <a-pagination
          class="pagination"
          v-model:pageSize="pageSize"
          @change="onchange"
          @showSizeChange="onShowSizeChange"
          v-model:current="current"
          :total="total"
          show-size-changer
        />
      </div>
    </div>
  </a-spin>
</template>

<style scoped>
@font-face {
  font-family: wlz;
  src: url(../../assets/fonts/HuaGuangGangTieZhiHei-KeBianTi-2.ttf);
}
.header {
  display: flex;
  align-items: center;
  height: 85px;
  border-bottom: 1px solid #ececec;
  padding: 20px;
}
.logo {
  font-family: wlz;
  font-size: 30px;
  cursor: pointer;
}
.search {
  width: 640px;
  margin-left: 30px;
}
.content {
  height: calc(100vh - 85px);

  padding: 10px 0;
  overflow-y: auto;
  background-color: #f3f4fa;
}
.list {
  display: flex;
  flex-wrap: wrap;
}
.pagination {
  margin: 20px;
}

.item {
  width: 250px;
  height: 240px;
  margin: 0 10px;
  margin-top: 30px;
}
.item > div {
  overflow: hidden;
}
.item img {
  width: 100%;
  border-radius: 5px;
  box-shadow: 0 0 20px rgb(0 0 0 / 5%);
  cursor: pointer;
  transition: 0.3s ease-in-out;
}
.item img:hover {
  transform: scale(1.2);
}
.item .title {
  color: #293c55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 10px 10px 2px 10px;
  margin: 0;
  display: block;
  font-size: 14px;
  text-align: left;
}
.item .tip {
  font-size: 12px;
  text-align: left;
  color: #aaa;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 3px 0 0 0;
  padding-left: 10px;
}
</style>
